<template>
  <el-button type="primary" @click="open()">{{ t('accountSelect.select.button') }}</el-button>
  <Dialog v-model="dialogVisible" :title="t('accountSelect.select.title')" width="1200">
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item :label="t('accountSelect.fields.studentName')" prop="studentName">
          <el-input
            v-model="queryParams.studentName"
            :placeholder="t('common.inputTextPlaceholder') + t('accountSelect.fields.studentName')"
            clearable
            @keyup.enter="handleQuery"
            class="!w-200px"
          />
        </el-form-item>
        <el-form-item :label="t('accountSelect.fields.studentCode')" prop="studentCode">
          <el-input
            v-model="queryParams.studentCode"
            :placeholder="t('common.inputTextPlaceholder') + t('accountSelect.fields.studentCode')"
            clearable
            @keyup.enter="handleQuery"
            class="!w-200px"
          />
        </el-form-item>
        <el-form-item :label="t('accountSelect.fields.classroom')" prop="classroom">
          <el-input
            v-model="queryParams.classroom"
            :placeholder="t('common.inputTextPlaceholder') + t('accountSelect.fields.classroom')"
            clearable
            @keyup.enter="handleQuery"
            class="!w-200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon icon="ep:search" class="mr-5px" />
            {{ t('common.search') }}
          </el-button>
          <el-button @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-5px" />
            {{ t('common.reset') }}
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>
    <vxe-table
      ref="tableRef"
      v-loading="loading"
      :data="list"
      stripe
      :row-config="{ keyField: 'id' }"
      :checkbox-config="{ labelField: 'studentName', reserve: true, highlight: true, range: true }"
      :column-config="{ resizable: true }"
      :size="vxeTableSize"
      @checkbox-all="selectChangeEvent"
      @checkbox-change="selectChangeEvent"
    >
      >
      <vxe-column
        type="checkbox"
        min-width="100"
        :title="t('accountSelect.fields.studentName')"
        :title-suffix="{
          content:
            '中国科大学生为[中国科大学生信息-基础信息]菜单中的姓名(本系统无法修改)\n联合培养学生为[联合培养学生信息]菜单中的姓名'
        }"
      />
      <vxe-column
        :title="t('accountSelect.fields.studentCode')"
        field="studentCode"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
        :title-suffix="{
          content:
            '中国科大学生为[中国科大学生信息-基础信息]菜单中的学号(本系统无法修改)\n联合培养学生为[联合培养学生信息]菜单中的学号'
        }"
      />
      <vxe-column
        :title="t('accountSelect.fields.classroom')"
        field="classroom"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
        :title-suffix="{
          content:
            '中国科大学生为[中国科大学生信息-在校信息]菜单中的班级(本系统无法修改)\n联合培养学生为[联合培养学生信息]菜单中的班级'
        }"
      />
      <vxe-column
        :title="t('accountSelect.fields.username')"
        field="username"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
        :title-suffix="{
          content: '[系统管理-学生账号管理]菜单中的学号(也是学生登录账号)'
        }"
      />
      <vxe-column
        :title="t('accountSelect.fields.phone')"
        field="phone"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
        :title-suffix="{
          content: '[系统管理-学生账号管理]菜单中的手机号(与学籍信息无关)'
        }"
      />
      <vxe-column
        :title="t('accountSelect.fields.email')"
        field="email"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
        :title-suffix="{
          content:
            '中国科大学生为[中国科大学生信息-基础信息]菜单中的电子邮件1(本系统无法修改)\n联合培养学生为[联合培养学生信息]菜单中的电子邮件1'
        }"
      />
      <vxe-column
        :title="t('accountSelect.fields.nickname')"
        field="nickname"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
        :title-suffix="{
          content: '[系统管理-学生账号管理]菜单中的昵称(与学籍信息无关)'
        }"
      />
      <vxe-column
        :title="t('accountSelect.fields.accountType')"
        field="accountType"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
      >
        <template #default="scope">
          {{ t(`accountSelect.state.type${scope.row.accountType}`) }}
        </template>
      </vxe-column>
      <vxe-column
        :title="t('accountSelect.fields.status')"
        field="activated"
        align="center"
        show-header-overflow
        show-overflow
        min-width="100"
        :title-suffix="{
          content:
            '系统中存在信息但从未登录过系统的学生状态为[未注册]\n可用状态为系统管理员后台处罚封禁'
        }"
      >
        <template #default="scope">
          <div class="flex gap-[5px]">
            <el-tag disable-transitions v-if="scope.row.activated" type="success"
              >{{ t('accountSelect.state.activated') }}
            </el-tag>
            <el-tag disable-transitions v-else>{{ t('accountSelect.state.inactivated') }}</el-tag>
            <el-tag disable-transitions v-if="scope.row.status === 0" type="success"
              >{{ t('accountSelect.state.enabled') }}
            </el-tag>
            <el-tag disable-transitions v-if="scope.row.status === 1"
              >{{ t('accountSelect.state.disabled') }}
            </el-tag>
          </div>
        </template>
      </vxe-column>
    </vxe-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <template #footer>
      <el-button @click="handleSelect" type="primary">{{ t('common.ok') }} </el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/store/modules/app'
import { VxeTableInstance, VxeTableEvents } from 'vxe-table'
import { AccountApi, AccountSelectVO } from '@/api/system/account'
import _ from 'lodash-es'

const model = defineModel<AccountSelectVO[]>({ required: true })

const { t } = useI18n()

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)

const dialogVisible = ref(false)

const loading = ref(false)

const list = ref<AccountSelectVO[]>([])
const total = ref(0)

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  username: undefined,
  phone: undefined,
  nickname: undefined,
  accountType: undefined,
  activated: undefined,
  status: undefined,
  studentName: undefined,
  studentCode: undefined,
  classroom: undefined
})
const queryFormRef = ref() // 搜索的表单

const selectChangeEvent: VxeTableEvents.CheckboxChange<AccountSelectVO> = () => {
  const $table = tableRef.value
  if ($table) {
    const current = (tableRef.value?.getCheckboxRecords() || []) as AccountSelectVO[]
    const reserve = (tableRef.value?.getCheckboxReserveRecords() || []) as AccountSelectVO[]
    model.value = _.cloneDeep([...current, ...reserve])
  }
}

// 搜索按钮操作
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

// 重置按钮操作
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const getList = async () => {
  loading.value = true
  try {
    const data = await AccountApi.getAccountSelectPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const open = async () => {
  dialogVisible.value = true
  await nextTick()
  if (model.value.length > 0) {
    await tableRef.value?.setCheckboxRow(model.value, true)
  }
  await getList()
}

const tableRef = ref<VxeTableInstance<AccountSelectVO>>()

const handleSelect = () => {
  dialogVisible.value = false
}
</script>

<style scoped lang="scss">
.simple-select {
  :deep(.el-select__wrapper) {
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--el-border-color);
  }
}

.simple-text {
  display: flex;
  align-items: center;
}
</style>
